<template>
  <page-header-wrapper :title="false">
    <a-card title="导入大客户">
      <a-button :key="i" v-for="(item, i) in types" style="margin-right: 15px; margin-bottom: 20px;" type="danger" @click="showModal(item)">导入{{ item.name }}</a-button>
      <div class="table-page-search-wrapper">
        <a-form-model :model="queryParam" layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-model-item label="文件名称">
                <a-input v-model="queryParam['filter[filename]']"/>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item label="客户类型">
                <a-select v-model="queryParam['filter[customer_type]']" :default-value="defaultType">
                  <a-select-option v-for="(item, index) in searchTypeOpts" :key="index" :value="index">
                    {{item}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item label="进行状态">
                <a-select v-model="queryParam['filter[status]']" :default-value="defaultStatus">
                  <a-select-option v-for="(item,index) in searchStatusOpts" :key="index" :value="index">
                    {{item}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click='resetLogForm'>重置</a-button>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <s-table
        bordered
        ref="table"
        :columns="logColumns"
        :row-key="(log) => log.log_id"
        :data="logData"
      >
        <template slot='action' slot-scope="">
          暂无
        </template>
      </s-table>
    </a-card>
    <a-modal
      :title=modalTitle
      v-model='modalVisible'
      @ok="importVip"
    >
      <a-form-model
        :model="importForm"
      >
        <a-form-model-item label="上传文件" prop="">
          <a-upload
            name="file"
            accept=".csv"
            :action="upload"
            :file-list="fileList"
            :headers="headers"
            :remove="handleRemove"
            @change="handleChange"
          >
            <a-button> <a-icon type="upload" /> 上传csv格式的文件 </a-button>
          </a-upload>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
  import { STable } from '@/components'
  import col from '@/columns/customer'
  import { getImportVip, importVipLogList, postImportVip } from '@/api/customer'
  import apis from '@/api'
  import storage from 'store'
  import { ACCESS_TOKEN } from '@/store/mutation-types'

  export default {
    components: {
      STable
    },
    name: 'ImportVip',
    data () {
      return {
        logColumns: col.import_columns,
        logData: parameters => {
          return importVipLogList(Object.assign(parameters, this.queryParam)).then(res => {
            this.searchStatusOpts = res.result.status_opts
            this.searchTypeOpts = res.result.customer_type_opts
            return res.result
          })
        },
        defaultType: '',
        defaultStatus: '',
        searchTypeOpts: {},
        searchStatusOpts: {},
        modalVisible: false,
        modalTitle: '导入客户',
        types: [],
        selectedType: {},
        importForm: {},
        queryParam: {},
        upload: apis.UploadVipFile,
        headers: {
          'Access-Token': storage.get(ACCESS_TOKEN)
        },
        fileList: []
      }
    },
    created () {
      getImportVip().then(res => {
        this.types = res.result.data
      })
    },
    methods: {
      showModal (item) {
        this.fileList = []
        this.modalVisible = true
        this.modalTitle = '导入' + item.name
        this.selectedType = item
      },
      resetLogForm () {
        this.queryParam = {}
        this.$refs.table.refresh(true)
      },
      handleChange ({ file, fileList }) {
        let fList = fileList
        fList = fList.slice(-1)
        if (file.status === 'done') {
          if (file.response.status === 0) {
            this.importForm['customer_type'] = this.selectedType.type
            this.importForm['file[filename]'] = file.name
            this.importForm['file[fileurl]'] = file.response.result.url
          } else {
            fList = fileList.map(file => {
              file.status = 'error'
              return file
            })
            this.importForm = {}
            this.$error({
              title: file.response.msg
            })
          }
        }
        this.fileList = fList
      },
      handleRemove () {
        this.importForm = {}
      },
      importVip () {
        const _this = this
        postImportVip(_this.importForm).then(res => {
          if (res.status === 0) {
            _this.$refs.table.refresh(true)
            _this.modalVisible = false
            _this.importForm = {}
          } else {
            _this.$error({
              title: res.msg
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
</style>
